<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        table {
            width: 600px;
            color: #8f8e8e;
            text-align: center;
            border-collapse: collapse;
        }

        table thead {
            background: #F5F5F5;
        }

        table tr {
            height: 30px;
            line-height: 30px;
            border: 1px solid #ececec;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td><input type="checkbox" v-model="data.selected" @change="selectAll"></td>
                    <td>商品</td>
                    <td>单价</td>
                    <td>库存</td>
                    <td colspan="2">操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(val, idx) in data.list">
                    <td>
                        <input type="checkbox" :value="val" v-model="data.checkboxList" @change="checkSelect" />
                    </td>
                    <td>{{ val.name }}</td>
                    <td>{{ val.price }}</td>
                    <td>{{ val.stock }}</td>
                    <td>
                        <button @click="sub(val)">-</button>
                        {{ val.number }}
                        <button @click="add(val)">+</button>
                    </td>
                    <td>
                        <button @click="del(idx, val.id)">del</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>Total: {{ totalPrice() }}</td>
                </tr>
            </tfoot>
        </table>
    </div>

    <script type="module">
        import {createApp, reactive} from './js/vue.esm-browser.js'

        createApp({
            // setup选项，用于设置响应式数据和方法等 
            setup() {
                const data = reactive({
                    selected: false,
                    checkboxList: [],
                    list: [
                        {id: 1, name: "铅笔", price: 10, number: 1, stock: 3},
                        {id: 2, name: "鼠标", price: 20, number: 2, stock: 5},
                        {id: 3, name: "键盘", price: 30, number: 1, stock: 6}
                    ]
                })

                const selectAll = ()=> {
                    console.log("selected", data.selected);
                    if (data.selected) {
                        data.checkboxList = data.list
                    } else {
                        data.checkboxList = []
                    }
                    console.log(data.checkboxList);
                }

                const checkSelect = ()=> {
                    if (data.checkboxList.length == data.list.length && data.list.length != 0) {
                        data.selected = true
                    } else {
                        data.selected = false
                    }
                }

                const sub = (val)=>{
                    val.number--;
                    if (val.number <= 1) {
                        val.number = 1
                    }
                }
                const add = (val)=>{
                    val.number++;
                    if (val.number > val.stock) {
                        val.number = val.stock
                    }
                }

                const del = (idx, id)=>{
                    data.list.splice(idx, 1)
                    
                    let newArr = data.checkboxList.filter((val, idx)=>{
                        return val.id != id
                    })
                    data.checkboxList = newArr
                    checkSelect()
                }

                const totalPrice = ()=>{
                    let total = 0;
                    for (let i = 0; i< data.checkboxList.length; i++) {
                        total += data.checkboxList[i].price * data.checkboxList[i].number
                    }
                    return total
                }

                return {
                    data,
                    selectAll,
                    checkSelect,
                    sub,
                    add,
                    del,
                    totalPrice
                }
            }
        }).mount("#app")
    </script>
</body>
</html>